<template>
  <div class="profile-edit">
    <!-- 页面标题 -->
    <div class="page-title">个人资料</div>

    <div class="profile-body">
      <!-- 表单容器 -->
      <div class="form-container">
        <!-- Element Plus 表单 -->
        <el-form :model="form" label-width="110px" class="edit-form">
          <!-- 1. 注册日期 -->
          <el-form-item label="注册日期" prop="registrationDate">
            <el-date-picker
              v-model="form.registrationDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
            />
          </el-form-item>

          <!-- 2. 账户类型 -->
          <el-form-item label="账户类型" prop="accountType">
            <el-select v-model="form.accountType" placeholder="请选择">
              <el-option label="个人" value="individual" />
              <el-option label="夫妻" value="couple" />
              <el-option label="同性伴侣" value="same_sex" />
            </el-select>
          </el-form-item>

          <!-- 3. 状态 -->
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="建档" value="profile" />
              <el-option label="已批准" value="approved" />
              <el-option label="治疗中" value="in_treatment" />
              <el-option label="已完成" value="completed" />
            </el-select>
          </el-form-item>

          <!-- 4. 主要申请人姓名 -->
          <el-form-item label="主要申请人" prop="primaryName">
            <el-input v-model="form.primaryName" placeholder="请输入姓名" />
          </el-form-item>

          <!-- 5. 主要申请人生日 -->
          <el-form-item label="生日" prop="primaryBirthDate">
            <el-date-picker
              v-model="form.primaryBirthDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择生日"
            />
          </el-form-item>

          <!-- 6. 婚姻状况 -->
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-select v-model="form.maritalStatus" placeholder="请选择">
              <el-option label="单身" value="single" />
              <el-option label="已婚" value="married" />
              <el-option label="离异" value="divorced" />
              <el-option label="丧偶" value="widowed" />
              <el-option label="同居" value="cohabiting" />
            </el-select>
          </el-form-item>

          <!-- 7. 联系电话 -->
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入手机号" />
          </el-form-item>

          <!-- 8. 联系邮箱 -->
          <el-form-item label="邮箱" prop="contactEmail">
            <el-input v-model="form.contactEmail" placeholder="请输入邮箱" />
          </el-form-item>

          <!-- 9. 血型 -->
          <el-form-item label="血型" prop="bloodType">
            <el-select v-model="form.bloodType" placeholder="请选择">
              <el-option label="A" value="A" />
              <el-option label="B" value="B" />
              <el-option label="AB" value="AB" />
              <el-option label="O" value="O" />
            </el-select>
          </el-form-item>

          <!-- 10. RH 因子 -->
          <el-form-item label="RH 因子" prop="rhFactor">
            <el-select v-model="form.rhFactor" placeholder="请选择">
              <el-option label="阳性" value="positive" />
              <el-option label="阴性" value="negative" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 客服信息 -->
      <div class="customer">客服信息</div>
    </div>
    <!-- 提交按钮 -->
    <div class="profile-button">
      <el-button type="primary" class="submit-btn" @click="submit">
        修改
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
// Vue 组合式 API
import { onMounted, ref } from "vue";
// Element Plus 类型
import type { FormItemProps, FormProps } from "element-plus";
// 业务接口：获取、更新个人信息
import {
  parentsInfo,
  setPersonalInformation,
} from "@/api/business/parents-to-be";
// 消息提示
import { message } from "ant-design-vue";
// 用户状态管理
import { useUserStore } from "@/store/modules/user";

// 获取用户 Store
const userStore = useUserStore();
const user_id = ref(userStore.id);

// 表单标签位置（已移除 Windi CSS，保留变量以便后续可能使用）
const labelPosition = ref<FormProps["labelPosition"]>("right");
const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");

// 表单数据（已移除 Windi CSS 相关 class）
const form = ref({
  registrationDate: "", // 注册日期
  accountType: "individual", // 账户类型
  status: "profile", // 状态
  primaryName: "", // 主要申请人姓名
  primaryBirthDate: "", // 主要申请人生日
  maritalStatus: "single", // 婚姻状况
  contactPhone: "", // 联系电话
  contactEmail: "", // 邮箱
  bloodType: "A", // 血型
  rhFactor: "positive", // RH 因子
  userId: user_id.value, // 用户ID
});

/**
 * 获取个人信息
 */
const getList = () => {
  parentsInfo({
    userId: user_id.value,
  }).then((res) => {
    console.log(res, "res");
    if (res.data) {
      form.value = res.data;
    }
  });
};

/**
 * 提交修改
 */
const submit = () => {
  setPersonalInformation(form.value).then((res) => {
    console.log(res, "setPersonalInformation");
    message.success("修改成功");
  });
};

// 组件挂载时拉取个人信息
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
/* 页面主容器 */
.profile-edit {
  background-color: #fff;
}

/* 页面标题 */
.page-title {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-weight: bold;
  font-family: "Microsoft YaHei", sans-serif;
  color: #2b5cab;
  text-align: left;
}

/* 表单容器：上下内边距 20px */
.form-container {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 表单样式：每个表单项下边距 18px */
.edit-form {
  .el-form-item {
    margin-bottom: 18px;
  }
}

/* 提交按钮：顶部外边距 20px */
.submit-btn {
  margin-top: 20px;
}

.edit-form {
  .el-form-item {
    // 同时约束 input、textarea、select
    .el-input,
    .el-textarea,
    .el-select {
      // 首选 45%，不生效就回退 400px
      max-width: 45%;
      max-width: 400px;
    }
  }
}
.profile-body {
  display: flex;
  gap: 20px;
}
.profile-body > * {
  flex: 1 1 0; /* 左右各占 50% */
  min-width: 0; /* 防止内容溢出 */
}

/* 水平居中 */
.profile-button {
  display: flex;
  justify-content: center;
}

/* 按钮主色调 */
.submit-btn {
  background-color: #2b5cab;
  border-color: #2b5cab;
}

/* 悬浮态 */
.submit-btn:hover {
  background-color: #1e4785;
  border-color: #1e4785;
}

/* 点击态 */
.submit-btn:active {
  background-color: #153a75;
  border-color: #153a75;
}

/* 禁用态（可选） */
.submit-btn.is-disabled,
.submit-btn.is-disabled:hover,
.submit-btn.is-disabled:active {
  background-color: #a0b9d9;
  border-color: #a0b9d9;
}
</style>
